<template>
	<div>
		<div
			class="header"
			style="background:#2b6447"
		>
			<div class="header-left">
				<img
					src="../assets/air_images/logo.png"
					alt=""
					width="100"
					height="50"
				/>
				<el-menu
					mode="horizontal"
					background-color="#2b6447"
				>
					<el-menu-item
						style="color:white"
						index="1"
						@click="index"
					>首页</el-menu-item>
					<el-menu-item
						style="color:white"
						index="4"
						@click="ddzx"
					>订单中心</el-menu-item>
				</el-menu>
			</div>
			<div class="grid-content bg-purple">
				<span style="margin-right: 20px; font-size: 20px; color: white">
					<span
						style="cursor: pointer"
						@click="log"
						v-if="operateUsers == null"
					>登录 | </span>
					<span
						style="cursor: pointer"
						@click="regieter"
						v-if="operateUsers == null"
					>注册</span>
					<span
						style="cursor: pointer"
						v-if="operateUsers != null"
						v-text="operateUsers.name"
						@click="hyzx"
					></span>
					<img
						:src="operateUsers.headImg"
						v-if="operateUsers != null"
						style="width:30px;cursor: pointer"
						@click="hyzx"
					/>
					<span
						style="cursor: pointer"
						v-if="operateUsers != null"
						@click="logout"
					>| 退出</span>
				</span>

			</div>
		</div>
		<router-view></router-view>

		<div
			class="aboutus"
			style="background:#2b6447"
		>
			<ul class="aboutus-ul">
				<li>
					<p style="font-size: 10px;">@Copyright 2021 郁郁葱葱</p>
				</li>
				<p style="font-size: 10px;">|</p>
				<li>
					<p style="font-size: 10px;">2856924224@qq.com</p>
				</li>
				<p>|</p>
				<li>
					<p style="font-size: 10px;">13227861078</p>
				</li>
				<p>|</p>
				<li>
					<p style="font-size: 10px;">Address：西北农林科技大学</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Index",
		data() {
			return {
				showName: false,
				operateId: '',
				operateUsers: null
			};
		},
		methods: {
			index() {
				this.$router.push({ path: "/" });
			},
			hyzx() {
				this.$router.push({ path: "/hyzx" });
			},
			ddzx() {
				this.$router.push({ path: "/ddzx" });
			},
			log() {
				this.$router.push({ path: "/log" });
			},
			regieter() {
				this.$router.push({ path: "/regieter" });
			},
			logout() {
				document.cookie = "operateUsers=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
				this.operateUsers = null;
				this.$router.push({ path: "/" });
			}

		},
		created() {

			var strcookie = document.cookie;//获取cookie字符串
			var arrcookie = strcookie.split("; ");//分割
			//遍历匹配
			for (var i = 0; i < arrcookie.length; i++) {
				var arr = arrcookie[i].split("=");
				if (arr[0] == 'operateUsers') {
					this.operateUsers = JSON.parse(arr[1]);
				}
			}
			this.operateId = this.$route.query.operateId;
		}

	};
</script>

<style scoped>
	.header {
		display: flex;
		justify-content: space-between;
		background: #fff;
		align-items: center;
	}

	.header-left {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.aboutus {
		height: 50px;
		width: 100%;
		background: rgb(239, 239, 239);
		padding-top: 30px;
		position: fixed;
		bottom: 0px;
		display: block;
		margin-top: 20px;
	}

	.aboutus-ul {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}

	.aboutus-ul li p:nth-of-type(1) {
		color: white;
	}

	.aboutus-ul li p {
		color: #747474;
		height: 38px;
		line-height: 38px;
	}
</style>
